<template>
	<uni-popup :show="timeDialog" ref="timePopup">
		<div class="popup_content">
			<div class="common-dialog">
				<view class="datetime-picker">
					<view class="nameText">
						起始时间：
					</view>
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="-" />
					<span v-if="timeError" class="error">{{ timeError }}</span>
				</view>
				<view class='btngroup' style="display: flex;margin: 20px 0;">
					<button class="button" size="mini" @click="closePopup()">取消</button>
					<button class="button editbtn" size="mini" type="primary" @click="searchData()">查询</button>
				</view>
			</div>
		</div>
	</uni-popup>
</template>

<script>
	import {
		required,
		minLength
	} from 'vuelidate/lib/validators'
	export default {
		data() {
			return {
				timeDialog: false,
				datetimerange: [],
				timeError: ''

			}
		},
		methods: {
			// 验证密码
			validateTime() {
				if (this.datetimerange.length == 0) {
					this.timeError = '时间区间不能为空';
				} else {
					this.timeError = '';
				}
			},
			showEdit() {
				this.$refs.timePopup.open()
			},
			searchData() {
				this.validateTime()
				if (this.timeError) {
					return false;
				} else {
					this.$emit('fetchQuery', this.datetimerange)
					this.closePopup()
				}

			},
			closePopup() {
				this.$refs.timePopup.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 80%;
		height: auto;
		padding: 20px;

		.common-dialog {
			width: 320px;
			border-radius: 12px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			padding: 20px 0px 0px 0px;
			/* 将底部内边距设置为0 */
			display: flex;
			flex-direction: column;

			.input-item-groud {
				margin: 20px 0;
			}

			.datetime-picker {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				width: 96%;
				background: #fff;
				margin-left: 2%;

				.nameText {
					margin: 5px 0;
				}

				::v-deep .uni-date__x-input {
					font-size: 24rpx;
				}

				.search-btn {
					height: 34px;
					line-height: 34px;
				}



			}

			.btngroup {
				justify-content: center;

				.button {
					margin: 0;
				}

				.editbtn {
					margin-left: 15px;
				}
			}


			.error {
				color: #f34d37;
				font-size: 12px;
			}

			.input-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding: 0 30upx;
				position: relative;
				border-radius: 4px;

				input {
					height: 44px;
					list-style: 44px;
					width: 100%;
					border-radius: 4px;
					font-size: 14px;
					font-weight: 300;
					background-color: white !important;
					/* 设置背景颜色为白色或其他颜色 */
					outline: none;
				}
			}
		}
	}
</style>